<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.15.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

<!--    <script src="/js/axios.min.js"></script>-->

</head>
<body id = "body">
<div  id="app" v-loading="loading">
    <!-------------------------------drawer 存储过程获取产品列表 ----------------------up ------------------->
    <el-card>
        <div class="handle-table1" >
            <el-row :gutter="20" style="margin: 10px" >
                <el-col :span="2">
                    <el-button type="primary" @Click="add">新建</el-button>
                </el-col>
                <el-col :span="6">
                    <el-input v-model = "query.name" placeholder="单号"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @Click="searchLgtList">查询</el-button>
                </el-col>
            </el-row>
            <el-table
                    ref="multipleTable"
                    :data="projects"
                    tooltip-effect="dark"
                    style="width: 100%;"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="方案名称"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="code"
                        label="方案描述"
                        width="140">
                </el-table-column>
                <el-table-column label="操作" width="180" >
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                :disabled="scope.row.status != 'draft'"
                                icon="el-icon-delete"
                                @click="delMas(scope.row,scope.$index)"
                        >删除</el-button>
                        <span style="margin-right: 5px;margin-left: 5px"></span>
                        <el-button
                                type="text"
                                :disabled="scope.row.status != 'draft'"
                                icon="el-icon-edit"
                                @click="editMas(scope.row)"
                        >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="query.size"
                    :current-page.sync = "query.index"
                    @current-change="searchLgtList"
                    :total="100">
            </el-pagination>
        </div>
    </el-card>

</div>

</body>

<script>
    new Vue({
        el: '#app',
        created(){
        },
        mounted(){
        },
        beforeDestroy() {

        },
        data() {
            return {
                query:{
                    index:0,
                    size:10,
                    name:'',
                },
                loading:false,
                projects:[],
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val
            },

/******************************************数据格式化formater down*******************************************/

            /******************************************数据格式化formater up*******************************************/


/******************************************请求 down*******************************************/
            saveDraft(){
                let there = this;
                this.mas.status = 'draft';
                this.post('/lgtMas/save',this.mas,function (res) {
                    if(200 === res.code){
                        there.loading = false;
                        there.type = 'machingList';
                        there.success(res.message);
                        there.searchLgtList();
                    }else {
                        there.loading = false;
                        there.error(res.message);
                        setTimeout(window.location.href='/main',3);
                    }
                })
            },
            delMas(row, index){
                let there = this;
                this.get('/lgtMas/del?id='+row.id,function (res) {
                    if(200 === res.code){
                        there.loading = false;
                        there.success(res.message);
                        there.searchLgtList()
                    }else {
                        there.loading = false;
                        there.error(res.message);
                    }
                })
            },
            searchLgtList(){
                let there = this;
                this.post('/lgtMas/query',this.query,function (res) {
                    if(200 === res.code){
                        there.lgtPage= res.data.page;
                    }else {
                        there.error(res.message);
                        setTimeout(window.location.href='/main',3);
                    }
                })
            },
            getMuser(){
                let there = this;
                this.get('/user/getMuser',function (res) {
                    if(200 === res.code){
                        there.muser = res.data.muser;
                    }else {
                        there.error(res.message);
                        setTimeout(window.location.href='/main',3);
                    }
                })
            },
            getStockQuality(){
                let there = this;
                let param = 'materialname='+this.SQ.materialname+'&materialmodel='+this.SQ.materialmodel+'&fStockId='+this.mas.outStockId
                this.get('/stockQuality/getStockQuality?'+param,function (res) {
                    console.log(res)
                    if(200 === res.code){
                        there.stockQuality = res.data.stockQuality;
                    }else {
                        there.error(res.message)
                    }
                })
            },

            checkIcItem(outcomes){
                let there = this;
                this.post('/basedata/checkIcItem',outcomes,function (res) {
                    if(200 === res.code){
                        there.outcome = res.data.outcome;
                    }else {
                        there.error(res.message)
                    }
                })
            },

            saveMuser(){
                let there = this;
                let user = this.muser;
                if(this.muser.n_password1 == this.muser.n_password2){
                    this.post('/user/saveMuser',this.muser, function (res) {
                        if(200 === res.code){
                            there.success(res.message);
                            there.type='';
                            there.editVisible=false;
                        }else {
                            there.error(res.message)
                        }
                    })
                }else{
                    there.success('新密码不一致');
                }
            },
            getAllBase(){
                let there = this;
                this.get('/basedata/getAllBase',function (res) {
                    if(200 === res.code){
                        there.getMuser();
                        there.company = res.data.company;
                        there.emp = res.data.emp;
                        there.suppiler = res.data.suppiler;
                        there.stock = res.data.stock;
                        there.icitem = res.data.icitem;
                    }else {
                        there.error(res.message)
                    }
                })
            },
            process(){
                let there = this;
                this.get('/lgtMas/finish?id='+this.mas.id,function (res) {
                    if(200 === res.code){
                        there.success('保存成功')
                        there.type = 'machingList';
                        there.searchLgtList();
                    }else {
                        there.error(res.message)
                    }
                })
            },
            post(url,data,callback){
                this.loading = true;
                let there = this;
                this.$axios.post(url,JSON.stringify(data)).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    there.loading = false;
                    there.error(err)
                });
            },
            get(url,callback) {
                this.loading = true;
                let there = this;
                this.$axios.get(url).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    console.log(err);
                    there.loading = false;
                    there.error(err)
                });

            },
            error(mes){
                this.$message({
                    message: mes,
                    type: 'error'
                });
            },
            success(mes){
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            add(){
                window.location.href='/add';
            }
        },
        computed(){
        }
    })
</script>
<style>
    #body {
        margin: 0;
        padding: 0;
        background-color: #f2f2f2;
    }
    .c_head{
        background-color: #ffffff;
    }
    .c_header_left{
        float: left;
    }
    .c_header_right{
        float: right;
        margin: 10px;
    }
    .el-menu-item{
        font-weight: bold;
    }
    .c_menu_item{
        font-size: 35px;
        margin-left: 50px;
        margin-right: 50px;
    }
    .c_form_btn{
        float: right;
        margin-right: 50px;
    }
    .c_form{
        margin-bottom: 50px;
    }
    .handle-box {
        margin: 20px;
    }
    .handle-input {
        margin: 10px;
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
</html>